<template>
    <div class="invitaton-box">
        <div class="invitaton-tittle">
            <div class="invitaton-tittle-box">
                <i @click="invitatonreturn()" class=" plipayticon iconfont icon-jiantou"></i>
                <span>我的邀请</span>
                <span class="invitaton-ruler" @click="invitatonruler()">邀请规则</span>
            </div>
            <!-- <p class="invitaton-tittle-p">团队人数每增加1人，将额外增加2%或8%的SQT收益，如果处于营业状态，则在SQT增加8%的产出速度；否则增加2%的SQT的加速。</p> -->
            <div class="invitaton-mytitle">
                <div class="invitaton-mytop">
                    <span class="invitaton-mytop-left">我的邀请</span>
                    <div class="invitaton-mytop-right" @click="lookinvatation()">查看我的邀请人&nbsp<i
                            class="iccc iconfont icon-iconfontyoujiantou"></i></div>
                    <div class="invitaton-sum">
                        <div class="invitaton-sum-left">
                            <span>{{dirct_invite_numer?dirct_invite_numer:0}}</span>
                            <p>直邀</p>
                        </div>
                        <div style="width: 1px;height: 30px ;background: #cccccc"></div>
                        <div class="invitaton-sum-left">
                            <span>{{second_invite_number?second_invite_number:0}}</span>
                            <p>我的团队</p>
                        </div>
                    </div>
                    <div class="invitaton-btn" @click="share()">邀请好友</div>
                </div>
            </div>
        </div>
        <div class="invitaton-center">
            <div class="invitaton-center-p">
                被邀请用户
                <!-- <p><img src="../../assets/img/personal-icon-speed@2x.png">&nbsp当前SQT加速：20%</p> -->
            </div>
            <div class="invitaton-user">
                <!-- <div class="invitaton-user-left">
                    &nbsp用户名
                    <span style="margin-left:20px;">用户等级</span>
                    <span style="margin-left:20px;">状态</span>
                </div>
                <div class="invitaton-user-right"><span>团队人数</span><span>SQT加速</span></div> -->
                <div style="width:25%;">用户名</div>
                <div style="width:32%;">用户等级</div>
                <!-- <div style="width:15%;">状态</div> -->
                <div style="width:15%;">团队人数</div>
                <!-- <div style="width:15%;">SQT加速</div> -->
            </div>
            <!-- <div style="clear: both"></div> -->
            <noData v-if=" !tbUserGameBuidingList || tbUserGameBuidingList.length<1"></noData>
            <ul v-else class="invitaton-formation">
                <li v-for="val in tbUserGameBuidingList">
                    <div style="width:25%;">{{val.userName}}</div>
                    <div style="width:30%;">
                        {{val.vipName}}
                        <span v-if="val.integralAgent == 1" style="color:#ffcf31;">(代理)</span>
                        <span v-if="val.integralAgent == 2" style="color:#ffcf31;">(高级代理)</span>
                        <span v-if="val.integralAgent == 3" style="color:#ffcf31;">(城市合伙人)</span>
                    </div>
                    <!-- <div style="width:18%;" v-if="val.bizStatus == 0">未营业</div>
                    <div style="width:16%;color:#FF2E67;" v-if="val.bizStatus == 1">营业中</div> -->
                    <div style="width:16%;text-align: center;">{{val.teamNum}}</div>
                    <!-- <div style="width:16%;text-align: center;">{{val.sqtRate*100}}%</div> -->
                    <!-- <div class="invitaton-formation-left">
                        <img v-if="val.avater" :src="val.avater">
                        <img v-else src="../../assets/img/personal-img-head@2x.png">
                        <div style="margin-top:4px;">
                            &nbsp&nbsp {{val.userName}} &nbsp
                            <div class="invitaton-formation-left-box">{{val.vipName}}</div>
                            <p v-if="val.businessHours == 0">&nbsp&nbsp 未营业</p>
                            <p v-if="val.businessHours > 0">&nbsp&nbsp 营业中</p>
                        </div>
                        <div class="srcdre"></div>
                    </div>
                    <div class="invitaton-formation-right">
                        <p>{{val.inviteNumber}}</p>
                        <p class="invitaton-su">4%</p>
                    </div> -->
                </li>
            </ul>

        </div>
        <van-overlay :show="lookshow" @click="lookshow = false">
            <div class="wrapperr" @click.stop>
                <div class="blockk">
                    <p>我的邀请人</p>
                    <div class="myinvation-img">
                        <img v-if="invitMan.phavater" :src="invitMan.phavater" alt="">
                        <img v-else src="../../assets/img/personal-img-head@2x.png" alt="">
                        <span>&nbsp {{invitMan.phone}}</span>
                    </div>
                    <div class="block-close" @click="blackclose">
                        关闭
                    </div>
                </div>
            </div>
        </van-overlay>

        <!--     //邀请海报-->
        <div style="position: relative;z-index: 10">
            <van-popup v-model="show" round position="bottom" :style="{ height: '160px'  }">
                <h1>邀请好友加入淘金客</h1>
                <!-- <share style="width: 100%;height: 100px;" :config="config"></share> -->
                <!-- <div class="social-share" data-initialized="true">
                <a href="#" class="social-share-icon icon-wechat"></a>
                <a href="#" class="social-share-icon icon-qq"></a>
                <a href="#" class="social-share-icon icon-qzone"></a>
            </div> -->
                <!-- <div class="social-share" data-wechat-qrcode-title="请打开微信扫一扫"></div> -->
                <ul class="invitation-shear">
                    <li @click="wechatFen(0,'weixin')">
                        <img src="../../assets/img/share-icon-wechat@2x.png" alt="">
                        <p>微信好友</p>
                    </li>
                    <li @click="wechatFen(1,'weixin')">
                        <img src="../../assets/img/share-icon-circle@2x.png" alt="">
                        <p>朋友圈</p>
                    </li>
                    <!-- <li @click="wechatFen(1,'qq')">
                    <img src="../../assets/img/share-icon-qq@2x.png" alt="">
                    <p>QQ</p>
                </li> -->
                    <li @click="saveImg">
                        <img src="../../assets/img/share-icon-download@2x.png" alt="">
                        <p>保存到本地</p>
                    </li>
                </ul>
            </van-popup>
        </div>
        <div v-show="show" class="haibao" ref="imageTofiles">
            <div style="width:100%;height: 500px;padding:10px;background-color: #2E9BFB;border-radius: 10px;">
                <img style="width: 94%;height: 371px;margin-left: 3%;" src="../../assets/img/inter.png" alt="">
            </div>
            <div style="position: absolute;bottom: 16px;left: calc(3% + 10px);background-color: #fff;padding: 4px;">
                <div id="qrcode"></div>
            </div>
            <div style="position: absolute;bottom: 20px;left: calc(3% + 155px);width: 108px;color:#fff;">
                <div style="margin-bottom: 6px;">注册【神器口袋】</div>
                <div style="margin-bottom: 16px;">开银行 赚大钱</div>
                <div style="font-weight: bold;">邀请码 {{userCode}}</div>
            </div>
        </div>
        <div style="position: fixed;z-index:1000000;top:0;width:100%;height: 100vh;background-color: rgba(0,0,0,.5);" v-if="showLoading">
            <div style="width:100%;text-align: center;color:#fff;position: relative;top:44vh;">
                <span v-if="shareShow">正在生成分享</span>
                <span v-else>正在保存</span>
            </div>
            <van-loading style="margin-top:46vh;margin-left:calc(50% - 15px)" color="#ff2e67" />
        </div>
    </div>
</template>

<script>
    import QRCode from "qrcodejs2"
    import html2canvas from 'html2canvas'
    import { Toast,Loading } from 'vant'
    import noData from "../public/noData"
    export default {
        name: "Myinvitation",
        data() {
            return {
                invitMan: {},
                lookshow: false,
                showLoading:false,
                show: false,
                userId: "",
                ininObj: {},
                dirct_invite_numer: 0,
                second_invite_number: 0,
                tbUserGameBuidingList: [],
                config: {
                    url: '', // 网址，默认使用 window.location.href
                    source: '', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
                    title: '', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
                    description: '打算大苏打大苏打', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
                    image: '', // 图片, 默认取网页中第一个img标签
                    sites: ['qzone', 'qq', 'weibo', 'wechat', 'douban'], // 启用的站点
                    disabled: ['google', 'facebook', 'twitter'], // 禁用的站点
                    wechatQrcodeTitle: '微信扫一扫：分享', // 微信二维码提示文字
                    wechatQrcodeHelper: '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
                },
                userName: '',
                userCode: '',
                userAvater: '',
                htmlUrl: '',
                shareData: [],
                sharewx: '',
                shareShow:true
            }
        },
        components: { QRCode, html2canvas, noData,[Loading.name]:Loading },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.initData();
        },
        methods: {
            initData() {
                this.$http.post(this.utils.config + "/netmall/app/person/api/getInvitedData?userId=" + this.userId).then((data) => {
                    if (data.data.success) {
                        this.ininObj = data.data.result;
                        this.dirct_invite_numer = data.data.result.dirct_invite_number;
                        this.second_invite_number = data.data.result.team_num;
                        this.tbUserGameBuidingList = data.data.result.invite_data;
                    }
                })
                this.$http.post(this.utils.config + "/netmall/app/person/api/getPersonCenterData?user_id=" + this.userId).then((data) => {
                    this.userName = data.data.result.tbMnUser.userName;
                    this.userCode = data.data.result.tbMnUser.inviteCode;
                    this.$route.query.type === "share" && this.share();
                    this.userAvater = data.data.result.tbMnUser.avater;
                })
            },
            // 页面元素转图片
            toImage() {
                var that = this;
                setTimeout(() => {
                    // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
                    // window.pageYOffset = 0;
                    // document.documentElement.scrollTop = 0
                    // document.body.scrollTop = 0
                    html2canvas(that.$refs.imageTofiles, {
                        scrollY: 0, 
                        scrollX: 0,
                        backgroundColor: null,
                        useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
                    }).then((canvas) => {
                        let url = canvas.toDataURL('image/png');
                        // let arr = url.split(',');
                        // let mime = arr[0].match(/:(.*?);/)[1];
                        // let bytes = atob(arr[1]); // 解码base64
                        // let n = bytes.length
                        // let ia = new Uint8Array(n);
                        // while (n--) {
                        //     ia[n] = bytes.charCodeAt(n);
                        // }
                        // var fileVal = new File([ia], "friendFen.png", { type: mime });
                        // let params = new FormData();
                        // params.append('file', fileVal);
                        // let config = {
                        //     headers: { //添加请求头
                        //         'Content-Type': 'multipart/form-data'
                        //     }
                        // }
                        // this.$http.post(this.utils.config + "/netmall/app/person/api/upload", params, config).then((data) => {
                        //     if (data.data.success) {
                        //         that.htmlUrl = data.data.message;
                        //     }
                        // })
                        let bitmap = new plus.nativeObj.Bitmap("test");
                        bitmap.loadBase64Data(url, (e) => {
                            bitmap.save('_doc/_tmp/head' + new Date().getTime() + '.png', {}, (e) => {
                                that.htmlUrl = e.target;
                            });
                        }, (e) => {
                            Toast('加载Base64图片数据失败：' + JSON.stringify(e));                            
                        });
                    })
                }, 1000)
            },
            //保存到本地
            saveImg() {
                this.shareShow = false;
                var setTim1 = setInterval(() => {
                    if (this.htmlUrl) {
                        plus.gallery.save(
                            this.htmlUrl,
                            function () {
                                Toast("保存成功");
                            },
                            function () {
                                Toast("保存失败");
                            }
                        );
                        clearInterval(setTim1);
                    }
                }, 200)
            },
            //微信分享
            wechatFen(num, str) {
                var that = this;
                that.shareShow = true;
                that.showLoading = true;
                this.$http.get(this.utils.config + "/netmall/app/person/api/everyDayTask?user_id=" + this.userId + "&taskName=分享应用").then((data) => {
                })
                var setTim2 = setInterval(() => {
                    if (this.htmlUrl) {
                        plus.share.getServices(function (e) {
                            that.shareData = e;　　　　　　　　//这个回调函数的参数 e 就包含了 所有对象的数组
                            //在这个数组里 找到属于微信的对象 循环匹配查找
                            for (var i in e) {
                                if (str == e[i].id) {
                                    that.sharewx = e[i]　　//保存到变量里 （之后即可使用该对象发起分享）
                                }
                            }
                            if (!that.sharewx.authenticated) {
                                s.authorize(() => {
                                    Toast("认证完成！");
                                }, function (e) {
                                    Toast("未进行认证");
                                }, {
                                    "appid": "ww261d9795b7ae9c87"
                                });
                            }
                            var typeStr;
                            if (num == 0) {
                                typeStr = 'WXSceneSession';
                            }
                            if (num == 1) {
                                typeStr = 'WXSceneTimeline';
                            }
                            let msg = {
                                type: 'image',　　//分享的内容的类型 
                                title: '淘金客',
                                pictures: [that.htmlUrl],
                                extra: { scene: typeStr } // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
                            }
                            setTimeout(()=>{
                                that.showLoading = false;
                            },1000)
                            //msg对象的属性和参数 官方文档里有说明
                            //这里就用到了上面获取到的 微信对象 使用send发起分享
                            that.sharewx.send(msg, function () {
                                Toast('分享成功')
                            }, function (error) {
                                Toast('分享失败')
                            })
                        })
                        clearInterval(setTim2);
                    }
                }, 200)
            },
            invitatonreturn() {
                this.$router.go(-1);
            }
            , invitatonruler() {
                this.$router.push("/invitationruler")
            },
            lookinvatation() {
                this.$http.post(this.utils.config + "/netmall/app/person/api/getMyInvitees?user_id=" + this.userId).then((data) => {
                    console.log(data)
                    if (data.data.success) {
                        this.invitMan = data.data.result;
                    }
                })
                this.lookshow = true
            },
            blackclose() {
                this.lookshow = false
            },
            share() {
                this.show = true;
                this.qrcode();
            },
            //  生成二维码
            qrcode() {
                document.getElementById("qrcode").innerHTML = "";
                let that = this;
                let qrcode = new QRCode('qrcode', {
                    width: 80,
                    height: 80,        // 高度
                    text: 'http://www.taojinke.top/shopIndex/#/registerOut/' + that.userCode,   // 二维码内容
                    logo: require('@/assets/img/logo.svg')
                    // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                    // background: '#f0f',   // 背景色
                    // foreground: '#ff0'    // 前景色
                })
                that.toImage();
            }
        },
    }
</script>

<style scoped>
    @import "../../assets/font/iconfont.css";

    .wrapperr {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .blockk {
        width: 302px;
        height: 236px;
        background: rgba(255, 255, 255, 1);
        border-radius: 10px;
        text-align: center;
    }

    .blockk p {
        margin-top: 25px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 25px;
    }

    .myinvation-img {
        margin-top: 32px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 44px;
    }

    .myinvation-img img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

    .block-close {
        margin: 48px auto 0;
        width: 124px;
        height: 38px;
        background: rgba(237, 237, 237, 1);
        border-radius: 19px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 38px;
        text-align: center;
    }

    .invitaton-box {
        width: 100%;
        min-height: 100%;
        background: rgba(255, 255, 255, 1);
        position: relative;
    }

    .invitaton-tittle {
        width: 100%;
        height: 207px;
        background: linear-gradient(180deg, rgba(255, 90, 160, 1) 0%, rgba(255, 46, 103, 1) 100%);
        position: relative;
        padding-top: 12px;
        border: none;
    }

    .invitaton-tittle-box {
        padding: 0 14px;
        display: flex;
        flex: 1;
        justify-content: space-between;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
    }

    .invitaton-ruler {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
    }

    .invitaton-tittle-p {
        margin-top: 34px;
        padding: 0 14px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 20px;
    }

    .invitaton-mytitle {
        height: 180px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 7px;
        position: absolute;
        bottom: -50px;
        left: 14px;
        right: 14px;
    }

    .invitaton-mytop {
        margin: 14px 15px 0 15px;
    }

    .invitaton-mytop-left {
        float: left;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
    }

    .invitaton-mytop-right {
        float: right;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(187, 187, 187, 1);
        line-height: 22px;
    }

    .iccc {
        font-size: 8px;
    }

    .invitaton-sum {
        height: 87px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        text-align: center;
        align-items: center;
    }

    .invitaton-sum-left span {
        font-size: 30px;
        font-family: DIN-Medium, DIN;
        font-weight: 500;
        color: rgba(255, 46, 103, 1);
        line-height: 36px;
    }

    .invitaton-sum-left p {
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(136, 136, 136, 1);
        line-height: 17px;
    }

    .invitaton-btn {
        width: 233px;
        height: 38px;
        background: linear-gradient(92deg, rgba(255, 203, 171, 1) 0%, rgba(223, 151, 128, 1) 100%);
        border-radius: 19px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 38px;
        text-align: center;
        margin: auto;
    }

    .invitaton-center {
        margin-top: 64px;
        padding: 0 14px 0;
        height: auto;
    }

    .invitaton-center-p {
        height: 50px;
        width: 100%;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
        float: left;
    }

    .invitaton-center-p p {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 46, 103, 1);
        line-height: 22px;
        float: right;
    }

    .invitaton-center-p img {
        display: inline-block;
        margin-top: 4px;
        width: 12px;
        height: 15px;
    }

    .invitaton-user {
        height: 25px;
        width: 100%;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(136, 136, 136, 1);
        line-height: 17px;
        display: flex;
        justify-content: space-between;
    }

    .invitaton-formation li {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* 
    .invitaton-user-left {
        width: 200px;
        float: left;
    }

    .invitaton-user-right {
        float: right;
        display: flex;
        justify-content: space-around;
        width: 130px;
    } */
    /* 
    .invitaton-formation li {
        width: 100%;
        height: 81px;
        background: rgba(216, 216, 216, 0);
        padding: 22px 0 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .invitaton-formation-left {
        width: 200px;
        float: left;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 17px;
    }

    .invitaton-formation-left img {
        display: inline-block;
        float: left;
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    .invitaton-formation-left-box {
        float: right;
        margin-right: 40px;
        width: 33px;
        height: 15px;
        background: linear-gradient(92deg, rgba(255, 203, 171, 1) 0%, rgba(223, 151, 128, 1) 100%);
        border-radius: 2px;
        line-height: 15px;
        text-align: center;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
    }

    .invitaton-formation-right {
        float: right;
        width: 124px;
        line-height: 36px;
        font-size: 16px;
        display: flex;
        justify-content: space-around;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        text-align: center;
    }

    .invitaton-formation-left p {
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 46, 103, 1);
        line-height: 17px;
    }

    .invitaton-formation-wei {
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(136, 136, 136, 1) !important;
        line-height: 17px;
    } */

    .srcdre {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 46, 103, 1);
        position: absolute;
        left: 28px;
        bottom: 24px;
    }

    h1 {
        font-size: 14px;
        font-family: SourceHanSansSC-Normal, SourceHanSansSC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        margin: 25px auto 0;
        width: 100%;
        text-align: center;
    }

    .invitation-shear {
        text-align: center;
        display: flex;
        justify-content: space-around;
        width: 100%;
        font-size: 12px;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: rgba(136, 136, 136, 1);
        line-height: 18px;
    }

    .invitation-shear li {
        margin-top: 32px;
    }

    .invitation-shear li img {
        width: 38px;
        height: 38px;
        border-radius: 50%;
    }

    .invitation-shear li p {
        margin-top: 6px;
    }

    .haibao {
        position: absolute;
        top: 8%;
        z-index: 88;
        left: 0;
        right: 0;
        margin: auto;
        width: 286px;
        height: 500px;
        background: #39a9ed;
        border-radius: 10px;
    }
</style>